<%@include file="/WEB-INF/header.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<link href="${pageContext.request.contextPath}/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
	
<form id="form" action="${ pageContext.request.contextPath }/manage/addmanager.action" method="post" enctype="multipart/form-data">
<input type="hidden" name="mediaid" value="${ media.mediaid }"/>
<input type="hidden" name="typeid" value="${ media.typeid }"/>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-2">
			<%@include file="../../tree.jsp"%>
		</div>
		<div class="col-md-10">
			<h2>
				媒体添加
			</h2>
			<div class="table-responsive">

				<table class="table table-striped table-sm">
					<thead>
						<tr>
							<th>媒体类型</th>
							<td>
								<select class="form-control bootstarp-selected"  name="mediatype" >
									<option value="P" <c:if test="${ mediatype==P }">selected</c:if>>--图片--</option>
									<option value="V" <c:if test="${ mediatype==V}">selected</c:if>>--视频--</option>
								</select>
							</td>
						</tr>
						<tr>
						 <th>媒体预览</th>
						 <td >
						<div class="col-xs-12 text-button">
							<span class="simulation">文件上传</span>
							<input class="form-control bootstarp-selected col-sm-3 preview" id="preview" type="file" name="uploadFile">
						</div>
						<div class="col-xs-12 text-tip tip-url-col" style="display: none">
							<span class="tip-url">暂无路径</span>
						</div>
						<div class="col-xs-12 text-tip">
							<span class="tip-notes">提示：只能上传jpg/png图片文件以及MP4格式视频文件，且不超过10MB</span>
						</div>
						 </td>
						</tr>
						<tr>
						 <th>标题</th>
						 <td><input class="form-control bootstarp-selected" type="text" name="mediatitle" value=""></td>
						</tr>
						 <tr>
						  <th>描述</th>
							<td><input class="form-control bootstarp-selected" type="text" name="description" value=""></td>
						 </tr>
  			         <tr>
						 <th>分类</th>
							<td>
							 <select class="form-control bootstarp-selected" name="typeid" >
							    <option value="0" selected = "selected">--请选择--</option>
 			                    <option value="1" >--人事宣传--</option>
 			                    <option value="2" >--党政宣传--</option>
 			                    <option value="3" >--安全宣传--</option>
 			                    <option value="4" >--财务宣传--</option>
 			                    <option value="5" >--品牌宣传--</option>
 			                    <option value="6" >--产品宣传--</option>
			                 </select>
							</td>
						</tr>	
						<tr>
						   <th>拍摄时间</th>
							<td>
								<input size="16" type="text" id="datetimeStart" name="screendate" class="form-control bootstarp-selected form_datetime">
							</td>
						</tr>											
						 <tr>
						   <th>是否开放</th>
							<td>
								<input type="hidden" class="form-control bootstarp-selected" name="isopen" id="isopen" value="${ media.isopen }">
								<div class="btn-group" data-toggle="buttons">
									<label class="btn btn-primary open <c:if test="${media.isopen==1}">active</c:if>">
										<input type="radio" name="options" id="open"> 开放
									</label>
									<label class="btn btn-primary noOpen <c:if test="${media.isopen==0}">active</c:if>">
										<input type="radio" name="options" id="noOpen"> 不开放
									</label>
								</div>
							</td>
						 </tr>
					</thead>
						<tr>
							<td colspan="2"><input type="submit" class="btn btn-success btn-add" value="添加"></td>
						</tr>
				</table>
				<c:if test="${not empty pageInfo.list}">
					<%@include file="../../pagebar.jsp"%>
				</c:if>

			</div>
		</div>
		<div id="myModal" class="modal fade" data-keyboard="false" data-backdrop="static" data-role="dialog"
			 aria-labelledby="myModalLabel" aria-hidden="true">
			<div id="loading" class="loading">加载中…</div>
		</div>
		<%@include file="/WEB-INF/footer.jsp"%>
</form>

<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
<script>
	$("#datetimeStart").datetimepicker({
		format: 'yyyy-mm-dd',
		minView:'month',
		language: 'zh-CN',
		autoclose:true,
		startDate:new Date()
	}).on("click",function(){
		$("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
	});
	<%--单选控件--%>
	$(".open").click(function(){
		$("#isopen").val(1);
	});
	$(".noOpen").click(function(){
		$("#isopen").val(0);
	});
	$("#preview").on('change', function () {
		$(".tip-url-col").attr("style","dispaly:block")
		var file = this.files[0];//获取文件信息
		if(file){
			$(".tip-url").html(file.name)
		}
	})

	/*添加效验规则*/
	jQuery.validator.addMethod("istrue", function(value, element) {
		if(value!=0){
			return true;
		}
	}, "请选择分类!");
	/*效验表单*/
	$("#form").validate({
		// 定义验证规则
		rules: {
			mediatitle: {
				required: true,
				minlength: 5,
				maxlength: 18
			},
			uploadFile:{
				required: true
			},
			mediatype:{
				required: true
			},
			description:{
				required: true,
				minlength: 5,
				maxlength: 18
			},
			typeid:{
				required: true,
				istrue:true
			},
			screendate:{
				required: true
			},
			isopen:{
				required: true
			}
		} ,
		// 定义验证信息
		messages:{
			mediatitle: {
				required: "请输入标题！",
				minlength: "文字最小限制5个字符",
				maxlength: "文字最小限制18个字符"

			},
			uploadFile:{
				required: "请选择文件！"
			},
			mediatype:{
				required: "请选择类型！"
			},
			description:{
				required: "请输入描述！",
				minlength: "文字最小限制5个字符",
				maxlength: "文字最小限制18个字符"
			},
			typeid:{
				required: "请选择分类！"
			},
			screendate:{
				required: "请选择拍摄时间！"
			},
			isopen:{
				required: "请选择是否开放！"
			}
		},submitHandler:function(form) {
			onLoading();
			form.submit();
		}
	});
	function onLoading() {
		$('#myModal').modal('show');
	}
</script>